/* 包裹整个 Welcome 区域的样式 */
div#Content div#Welcome  {
    display: flex; /* 使用 flex 布局 */
    /* justify-content: center;水平方向居中 */
    /* align-items: center;垂直方向居中 */
    height: 10vh; /* 占据整个视口高度 */
    background-color: #f0f8ff; /* 设置一个浅色背景 */
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
    font-family: Arial, sans-serif; /* 设置字体样式 */
}

/* 包裹内容的样式 */
div#Content div#WelcomeContent {
    text-align: center; /* 文本居中 */
    background: white; /* 内容区背景为白色 */
    padding: 20px; /* 内容区域内边距 */
    border-radius: 10px; /* 设置圆角边框 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    max-width: 16000px; /* 限制内容区域的宽度 */
    width: 20%; /* 适配较小屏幕 */
}

/* 欢迎标题样式 */
div#Content div#WelcomeContent h3 {
    font-size: 1.5em; /* 标题字体大小 */
    color: #734012; /* 字体颜色 */
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
    font-weight: bold; /* 字体加粗 */
}
#Wrapper {
    display: flex; /* 启用 flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative;
    margin: 40px auto;        /* 水平居中，顶部留间距 */
    height: 100%; /* 占满整个视口高度 */

}
body {
    font-family: helvetica, tahoma, arial, verdana, sans-serif;
    font-size: 2ex;
    margin: 0;
    padding: 0;

    color: #734012; /* 主文本颜色 */
}

pre {
    font-family: "Courier New", Courier, mono;

    font-style: normal;
    background-color: #FFFFFF;
    white-space: pre
}

h1 {
    margin: 1ex 0ex 1ex 0ex;
    padding: 0ex;

    line-height: 3ex;
    font-weight: 900;
    color: #666;
}

h2 {
    margin: 2ex 0ex 1ex 0ex;
    padding: 0ex;

    line-height: 2ex;
    font-weight: 700;
    color: #444;
}

h3 {
    margin: 1ex 0ex 1ex 0ex;
    padding: 0ex;

    line-height: 1.6ex;
    font-weight: 700;
    color: #222;
}

p {
    font-family: helvetica, tahoma, arial, verdana, sans-serif;

    margin: 0ex 0ex 0ex 0ex;
    padding: 2ex;
}

img {
    border: 0;
}

li {
    font-family: helvetica, tahoma, arial, verdana, sans-serif;

    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex;
}

/* 表格整体样式 */
table {
    border-collapse: separate; /* 保持单元格分离 */
    border-spacing: 12px; /* 单元格间距 */
    width: 80%; /* 表格宽度占满容器 */
    margin: 20px 0; /* 表格上下间距 */
    background-color: rgba(252, 204, 28, 0.1); /* 表格整体背景，带透明效果 */
}

/* 单元格样式 */
td, th {
    padding: 12px 16px; /* 单元格内边距 */
    text-align: center; /* 文本居中对齐 */
    vertical-align: middle; /* 内容垂直居中 */
    background-color: #fffbe6; /* 默认单元格背景 */
    border-radius: 8px; /* 单元格圆角 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑动画效果 */
}

/* 表头样式 */
th {
    font-weight: bold;
    background-color: #fccc1c; /* 主色调亮黄色 */
    color: #734012; /* 深棕色文字 */
    text-transform: uppercase; /* 表头文字大写 */
    pointer-events: none; /* 禁止表头悬浮交互 */
}

/* 表头无悬浮效果 */
th:hover {
    transform: none; /* 禁用放大效果 */
    box-shadow: none; /* 禁用阴影效果 */
}

/* 行悬浮效果 */
tr {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 行悬浮动画 */
}

tr:hover {
    transform: scale(1.02); /* 整行略微放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 添加整行柔和阴影 */
}

/* 奇数行背景 */
tr:nth-child(odd) td {
    background-color: rgba(252, 204, 28, 0.15); /* 透明亮黄色 */
}

/* 偶数行背景 */
tr:nth-child(even) td {
    background-color: rgba(252, 204, 28, 0.05); /* 更浅黄色 */
}

/* 单元格之间的间距调整 */
td {

    margin: 5px;
    border-spacing: 10px;
}


/* 链接的正常状态 */
a, a:visited, a:link {
    color: #734012; /* 深棕色文字，与主色调一致 */
    text-decoration: none; /* 去掉下划线 */
    font-family: helvetica, tahoma, arial, verdana, sans-serif; /* 字体 */
    font-weight: bold; /* 加粗文字 */
    font-size: 1.2em; /* 稍微增大文字大小 */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* 平滑过渡效果 */
}

/* 链接的悬停状态 */
a:hover {
    color: #fccc1c; /* 亮黄色，与主色调协调 */
    text-shadow: 0px 0px 4px rgba(252, 204, 28, 0.6); /* 添加柔和的发光效果 */
}

/* 链接的按下状态 */
a:active {
    color: #b3741d; /* 深橙色，突出点击状态 */
    text-shadow: none; /* 移除发光效果 */
    opacity: 0.8; /* 微弱的透明度变化 */
}

/* 按钮正常状态 */
a.Button, a.Button:link, a.Button:visited {
    padding: .3ex 1ex; /* 调整内边距 */
    color: #734012; /* 深棕色文字，与主色调一致 */
    background-color: #fccc1c; /* 亮黄色背景，与主色调一致 */
    text-decoration: none; /* 去掉下划线 */
    font-family: helvetica, tahoma, arial, verdana, sans-serif; /* 字体 */
    font-size: 1.5ex; /* 字体大小 */
    /* border: 2px solid #734012;深棕色边框 */
    border-radius: 6px; /* 圆角 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 按钮悬停状态 */
a.Button:hover {
    color: #fff; /* 白色文字 */
    background-color: #734012; /* 深棕色背景 */
    border-color: #734012; /* 保持深棕色边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 按钮按下状态 */
a.Button:active {
    background-color: #b3741d; /* 较深的橙色背景 */
    color: #fff; /* 保持白色文字 */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3); /* 内嵌阴影，增加按压感 */
}
#Footer {
    position: fixed; /* 固定定位 */
    bottom: 0;       /* 距离底部 0 */
    left: 0;         /* 距离左侧 0 */
    width: 100%;     /* 占满宽度 */
    background-color: #fccc1c; /* 底部背景色 */
    color: #734012;           /* 文字颜色 */
    text-align: center;       /* 文本居中 */
    padding: 10px 0;          /* 上下内边距 */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* 顶部阴影 */
}
#Header {
    position: sticky; /* 固定定位 */
    top: 0;          /* 距离顶部 0 */
    left: 0;         /* 距离左侧 0 */
    width: 100%;     /* 占满宽度 */
    /*background-color: #fccc1c; /* 主色调亮黄色 */
    /*color: #734012;           /* 文字颜色 */

    /*padding: 10px 0;          /* 上下内边距 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 底部阴影 */

}





#Logo {
    width: 33%;
    height: 9ex;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
    border-width: 0ex 0ex .3ex 0px;
    border-style: solid;
    border-color: #ccc;
    float: left;
    background-color: #fccc1c;
    color: #fff;
    line-height: 8ex;
    voice-family: "\"}\"";
    voice-family: inherit;

}

body>#Logo {
    height: 9ex;
}

#Menu {
    width: 33%;
    height: 9ex;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
    border-width: 0ex 0ex .3ex 0px;
    border-style: solid;
    border-color: #ccc;
    float: left;
    background-color: #fccc1c;
    color: #734012;
    text-decoration: none;
    font-family: helvetica, tahoma, arial, verdana, sans-serif;
    text-align: center;
    line-height: 9ex;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 9ex;
}

#Menu, #Menu a, #Menu a:link, #Menu a:visited, #Menu a:hover {
    color: #734012;
    text-decoration: none;
    font-family: helvetica, tahoma, arial, verdana, sans-serif;
}

body>#Menu {

    height: 9ex;
}

{
}

#Search {
    width: 34%;
    height: 9ex;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
    border-width: 0ex 0ex .3ex 0px;
    border-style: solid;
    border-color: #ccc;
    float: left;
    text-align: center;
    background-color: #fccc1c;
    color: #eaac00;
    line-height: 9ex;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 9ex;
}

body>#Search {
    height: 9ex;
}

#Search input {
    border-width: .1ex .1ex .1ex .1ex;
    border-style: solid;
    border-color: #ccc;
    background-color: #ffffff;
    color: #eaac00;
    border-radius: 4px;
    /* 定义圆角的大小 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */
}

#QuickLinks {
    text-align: center;
    background-color: #FFF;
    width: 100%;
}
#PoweredBy {
    width: 30%;
    height: 9ex;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
    border-width: .3ex 0ex .3ex 0px;
    border-style: solid;
    border-color: #ccc;
    float: left;
    background-color: #fccc1c;
    color: #fff;
    line-height: 9ex;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 9ex;
}

body>#PoweredBy {
    height: 9ex;
}

#Banner {
    width: 70%;
    height: 9ex;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
    border-width: .3ex 0ex .3ex 0px;
    border-style: solid;
    border-color: #ccc;
    float: left;
    background-color: #fccc1c;
    color: #fff;
    line-height: 9ex;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 9ex;
}

body>#Banner {
    height: 9ex;
}

#Content {
    margin: 0;
    padding: 0ex 0ex 0ex 0ex;
    width: 100%;
    color: #333;
    background-color: #FFF;
    border-width: 0;
}

#Separator {
    clear:both;
    margin: 0;
    height:0;
}

#Main {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 1ex;
    color: #333;
    background-color: #FFF;
    border-width: 1ex 0ex 2ex 0px;
    border-style: solid;
    border-color: #fff;
}

#Sidebar {
    float: left;
    background:inherit;
    width: 30%;
}
#Sidebar .hidden{
    margin-left:10px;
    display: inline-block;
    overflow: hidden;
    width: 210px;
    height: 19px;

    position: relative;
}
#Sidebar .words{
    position: absolute;
    left: -200px;
    font-weight: bold;
    font-style: italic;
    transition: left 0.8s ease;
    color: #eaac00;
}

#MainImage {
    float: left;
    background:inherit;
    text-align:center;
    width: 50%;
}

#MainImg {
    z-index: 0;
}

#MainImage{
    position: relative;
    background: transparent;
    z-index: 0;
}
#MainImage .new{
    position: absolute;
    top: 240px;
    left: 325px;

}
#MainImage .south{
    position: absolute;
    top: 95px;
    left: 390px;
    z-index: 700;
}
#MainImage .main{
    position: absolute;
    top: 50px;
    left: 165px;
}
#MainImage .main, #MainImage .south, #MainImage .new{
    transition: transform 0.5s ease;
    transform-origin: center center;
}
#MainImage .main:hover, #MainImage .south:hover, #MainImage .new:hover{
    transform: scale(1.3);
    box-shadow: 0 0 50px #eaac00;
    background-color: rgba(234, 172, 0, 0.35);
}
#Catalog {
    padding: 1ex;
    background:inherit;
    text-align:center;
}

#Catalog input[type="submit"]{
    height: 25px;
    color:#fff;
    background-color: #f1c48f;
    text-shadow: -2px 2px 2px rgb(209 132 0);
    box-shadow: 2px 2px 0px 0px #f39c12;
    transition: all .5s;
}
#Catalog input[type="submit"]:hover {
    cursor: pointer;
    background-color: #fcdc5e;
}

#Catalog .menu a{
    display: inline-block;
    margin-bottom: 3px;
}


#Catalog form{
    margin-bottom: 30px;
}
#Catalog form p{
    text-align: left;
    margin-left: 435px;
}
#Catalog form input[type="text"]{
    margin: 10px 0px;
}
#Catalog form td{
    text-align: left;
    margin: 0 5px;
    vertical-align: middle;
    background-color: #FFFFFF;
}


#BackLink{
    position: absolute;
    right: 2px;
    top: 120px;
    color: #eaac00;

}

#BackLink .con{
    position: relative;
    height:30px;
    width:250px;
}

#BackLink a{
    height: 30px;
    width: 250px;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    transition: .5s;

}

#BackLink a::before{
    content: '';

    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width:10px;
    height: 10px;
    border-left: 2px solid #eaac00;
    border-top: 2px solid #eaac00;
    transition: .5s;
}

#BackLink a::after{
    position: absolute;
    bottom: 0px;
    right: 0px;
    content: '';
    display: inline-block;
    width:10px;
    height: 10px;
    border-right: 2px solid #eaac00;
    border-bottom: 2px solid #eaac00;
    transition: .5s;

}
#BackLink a:hover::before, #BackLink a:hover::after{
    width: 248px;
    height: 28px;
}
#BackLink a:hover{
    background-color: #eaac00;
    color: #FFFFFF;
    box-shadow: 0 0 50px #eaac00;

}

#Cart{
    width: 69.99%;
    float: left;
    background-color:#fff;
}

#MyList{
    margin-top: 40px;
    padding-top: 20px;
    padding-left: 24px;
    width:340px;

    float: left;
    background: url("../images/list.jpg");
    background-size: cover;
    text-align:left;
}
#MyList ul li{
    display: inline-block;
    font-size:16px ;
    margin-bottom: 8px;
    font-style: italic;
}
#MyList span{
    text-align: center;
}
/*新增*/
/* 定义文本框的初始状态 */
#keyword {
    transition: transform 0.3s ease;
    width: 170px;
    height: 30px;
}

/* 定义鼠标悬停时的文本框状态 */
#keyword:hover {
    transform: scale(1.05);
}
/* 定义按钮的初始状态 */
#submit {
    transition: transform 0.3s ease;
    border: 1px solid #aaa;
    /* 边框 */
    background-color: #fccc1c;
    /* 背景色 */
    color: #eaac00;
    margin: 0;
    /* 按钮外边距 */
    cursor: pointer;
    /* 鼠标悬停时显示手型指针 */

    width: 170px;
    height: 34px;
}

/* 定义鼠标悬停时的文本框状态 */
#submit:hover {
    transform: scale(1.05);
    background-color: #d9d9d9;
    /* 鼠标悬停时的背景色 */
    color: #215496;
    /* 鼠标悬停时的文本颜色 */
}

/* 定义提交按钮的聚焦样式 */
#submit:focus {
    outline: none;
    background-color: #d9d9d9;
}
/*实验二自动补齐*/
#productAutoComplete {

    background: #FFFFF6;
    /*top: -23px;*/
    display: none;
    border: 1.3px solid #ccc;
    /* 修改边框颜色为 #ccc */
    width: 320px;
    /*position: relative;*/

    position: relative;
    top: -23px;
    left:110px;
    z-index: 1000;

}

#productAutoList {
    margin: 0;
    padding: 0;
    border: 1px solid #aaa;
}

/*搜索框的每一列*/
.productAutoItem {
    list-style: none;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: left;
    padding-left: 7px;
    margin-top: 2px;
    border-bottom: 1px solid #FFFFF6;
    color: #fccc1c;
    cursor: pointer;

    left: 0;
    z-index: 9999; /* 增大z - index值 */
}

.productAutoItem:hover {
    transform: scale(1.05);
    background-color: #F5F4EB;
    /* 鼠标悬停时的背景色 */
    color: #215496;
    /* 鼠标悬停时的文本颜色 */
}

#signIn:hover {
    font-size: 20px;
}

#logHistory:hover {
    font-size: 20px;
}

#editAccountForm:hover {
    font-size: 20px;
}

#help:hover {
    font-size: 20px;
}

#Banner img {
    max-width: 33%;
    /* 或者指定一个具体的像素值，例如：max-width: 300px; */
    max-height: 33%;
    /* 或者指定一个具体的像素值，例如：max-height: 200px; */
    height: auto;
    /* 保持图片的原始宽高比 */
    width: auto;
    /* 保持图片的原始宽高比 */
}

.topImg:hover{
    box-shadow: 0 0 30px #eaac00;
    background-color: rgba(234, 172, 0, 0.22);
}
.signOnTable {
!important;
    width: 35%; /* 调整为所需宽度，例如60% */
    margin: 0 auto; /* 表格居中 */
    /* 边框合并  border-collapse: collapse; */
}
.signOnTable td {
!important;
    padding: 10px; /* 内边距，使内容更紧凑 */
}
.signOnTable input{
!important;
    width: 250px;
    height: 30px;
    padding-left: 38px;
    margin: 10px 0;
    border: 2px solid #eaac00;

}
.signOnTable div{
!important;
    position: relative;
}
.signOnTable .ver{
!important;
    height:32px;
    position: absolute;
    right: 2px;
    top:12px;
}
.signOnTable .icon{
!important;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 2px;
    top:12px;
    background-color: #eaac00;
}

/*实验二商品悬浮窗*/
#productInfo {
    background: #FFFFF6;
    border: 1.3px solid #ccc;
    border-radius: 6px;

    text-align: center;
    padding: 0; /* 去除内边距 */
    width: 410px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* 确保它在页面其他元素之上 */
    display: none;
}


#specialTh,#specialTd {
    padding: 2px 3px;
    text-align: center;
    vertical-align: middle;
    background-color: #fffbe6;
    border-radius: 1px;
    font-size: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑动画效果 */
}

#specialTh {
    font-weight: bold;
    background-color: #fccc1c; /* 主色调亮黄色 */
    color: #734012; /* 深棕色文字 */
    text-transform: uppercase; /* 表头文字大写 */
    pointer-events: none; /* 禁止表头悬浮交互 */
}

#specialTr {
    height: 14px;
    width: 20px;
}

#specialTd {
    margin: 2px;
    border-spacing: 3px;
}

#specialP {
    display: flex; /* 启用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%; /* 如果需要在父容器中垂直居中，可以设置一个固定高度或使用 100% */
    margin: 0; /* 去除外边距 */
}

#specialTable {
    width: 100%; /* 表格宽度设置为100%，占满父容器宽度 */
    table-layout: fixed; /* 固定表格布局，确保列宽可以根据内容自动调整 */
    margin: 0 auto; /* 自动水平居中，0 上下外边距 */
    padding: 4px; /* 添加内边距 */
}

/* 奇数行背景 */
#specialTr:nth-child(odd) td {
    background-color: rgba(252, 204, 28, 0.15); /* 透明亮黄色 */
}

/* 偶数行背景 */
#specialTr:nth-child(even) td {
    background-color: rgba(252, 204, 28, 0.05); /* 更浅黄色 */
}






